$(function() {
    //首页进去时
    var e = 3, //设置一次显示多少张图片
         page = 1,
        last = false;
    $.ajax({
            url:'/client/get?page=1&e='+e,
            data:{},
            type:'GET',
            dateType:'json',
            success:function(res){
                //解析res
                var obj = eval("("+res+")");
                console.log(obj);
                if(obj.error == 0){
                    //判断是否加载完毕
                    if (obj.num == 0 || last) {
                        last = true;
                        layer.msg('加载完毕！');
                        return;
                    }
                    //加载 成功函数
                    toSuccess(obj,1,e);
                    page++;
                }else{
                    layer.msg(obj.msg);
                }
            },
            error:function(){
                layer.msg('error');
            }
        });
    //接收数据头部导航搜索参数
    $('#go').click(function () {
        $('#waterfull ul').empty();
        var search = $('#search').val();
        page = 1;
            $.ajax({
                url:'/client/get?page=1&e='+e,
                data:{search:search},
                type:'GET',
                dateType:'json',
                success:function(res){
                    //解析res
                    var obj = eval("("+res+")");
                    if(obj.error == 0){
                        console.log(obj);
                        //加载 成功函数
                        toSuccess(obj,page,e);
                        page++;
                    }else{
                        layer.msg(obj.msg);
                    }

                },
                error:function(){
                    layer.msg('error');
                }
            });
    });
    //接收数据首页搜索参数
    $('#go2').click(function () {
        $('#waterfull ul').empty();
        var search = $('#search2').val();
        page = 1;
        $.ajax({
            url:'/client/get?page=1&e='+e,
            data:{search:search},
            type:'GET',
            dateType:'json',
            success:function(res){
                //解析res
                var obj = eval("("+res+")");
                if(obj.error == 0){
                    console.log(obj);
                    //加载 成功函数
                    toSuccess(obj,page,e);
                    page++;
                }else{
                    layer.msg(obj.msg);
                }

            },
            error:function(){
                layer.msg('error');
            }
        });
    });
    //接收类别
    $('.category-image').click(function () {
        $('#waterfull ul').empty();
        var type = $(this).find("input[id=type]").val(),
            typeName = $(this).find("input[id=typeName]").val();
        $.ajax({
            url:'/client/get?page=1&e='+e,
            data:{type:type,typeName:typeName},
            type:'GET',
            dateType:'json',
            success:function(res){
                //解析res
                var obj = eval("("+res+")");
                console.log(obj);
                if(obj.error == 0){
                    //加载 成功函数
                    toSuccess(obj,page,e);
                }else{
                    layer.msg(obj.msg);

                }
                last = true;
            },
            error:function(){
                layer.msg('error');
            }
        });
    });
    //详细页收藏

    /*****************************************************/

    $(window).scroll(function () {//alert(21);
            if(($(window).scrollTop() + $(window).height()) == $(document).height()){
                var search = $('#search').val();
                if(search == false){
                    search = $('#search2').val();
                }
                if (page > 1) {
                $.ajax({
                    type: "GET",
                    url: '/client/get?page='+page+'&e='+e,
                    data: {search:search},
                    async:false,
                    success: function(res) {
                        //解析res
                        var obj = eval("("+res+")");
                        console.log(obj);
                        if(obj.error == 0){
                            //判断是否加载完毕
                            if (obj.num == 0 || Math.ceil(obj.num/e) < page || last == true) {
                                layer.msg('没有更多作品！');
                                return;
                            }
                            //加载 成功函数
                            toSuccess(obj,page,e);
                            //页数超过总页  停止加载
                            page++;
                        }else{
                            layer.msg(obj.msg);
                        }
                    },
                    error: function() {
                        alert("network error");
                    }
                });
                }
            }
        });

});
    //ajax成功之后调用函数
    function toSuccess(obj,page,e){

    var boxes = new Array;
    var sqlJson = obj.list;
    var div = $('#waterfull ul');
    for(var i=0;i<sqlJson.length;i++){
        var html="";
        html+="<li class='item' style='display: none'><a onclick='opena("+sqlJson[i].id+")'  class='a-img'><img src='/productImg/"+sqlJson[i].picture+"'></a>";
        html+="<div class='choose'><div class='collect'><a onclick='setcollection("+sqlJson[i].id+","+page+","+i+")'><img src='/client/image/star.png''><p id='collect"+page+i+"'>"+sqlJson[i].num_c+"</p></a></div><div class='like'><a onclick='setlike("+sqlJson[i].id+","+page+","+i+")'><img src='/client/image/heart_b.png'><p class='num_love' id='like"+page+i+"'>"+sqlJson[i].num_love+"</p></a></div></div>";
        html+="<h2 class='li-title'>"+sqlJson[i].name+"</h2>";
        html+="<p class='description'>"+sqlJson[i].brief+"</p><div class='qianm clearfloat'>";
        html+="<div class='user-block'><div class='user' ><img style='border-radius:50%' src='/portraitImg/"+sqlJson[i].artist_portrait+"'></div></div><div class='user-introduction'>";
        html+="<div class='user-name'>"+sqlJson[i].artist_name+"</div><div class='user-skill'>"+sqlJson[i].artist_content+"</div> </div></div></li>";
        div.append(html);
        $('#waterfull ul li').eq((page-1)*e+i).fadeIn(i*2000);
    }
        boxes.push(div);
    $("#demo").gridalicious('append', boxes);
}
//公共ajax
//     function ajax(url,data,async){
//             $.ajax({url:url,data:data,type:"GET",async:async,
//                 success:function(res){
//                     var obj = eval("("+res+")");
//                     console.log(obj);
//                     if(obj.error == 0){
//                         var container = $('.waterfull ul');
//                         var loading=$('#imloading');
//                         // 初始化loading状态
//                         loading.data("on",true);
//                         /*判断瀑布流最大布局宽度，最大为1280*/
//                         function tores(){
//                             var tmpWid=$(window).width();
//                             if(tmpWid>1280){
//                                 tmpWid=1280;
//                             }else{
//                                 var column=Math.floor(tmpWid/320);
//                                 tmpWid=column*320;
//                             }
//                             $('.waterfull').width(tmpWid);
//                         }
//                         tores();
//                         $(window).resize(function(){
//                             tores();
//                         });
//                         container.imagesLoaded(function(){
//                             container.masonry({
//                                 columnWidth: 320,
//                                 itemSelector : '.item',
//                                 isFitWidth: true,//是否根据浏览器窗口大小自动适应默认false
//                                 isAnimated: true,//是否采用jquery动画进行重拍版
//                                 isRTL:false,//设置布局的排列方式，即：定位砖块时，是从左向右排列还是从右向左排列。默认值为false，即从左向右
//                                 isResizable: true,//是否自动布局默认true
//                                 animationOptions: {
//                                     duration: 800,
//                                     easing: 'easeInQuad',//如果你引用了jQeasing这里就可以添加对应的动态动画效果，如果没引用删除这行，默认是匀速变化
//                                     queue: false//是否队列，从一点填充瀑布流
//                                 }
//                             });
//                         });
//                         //
//                         var sqlJson = obj.list;
//                         $(window).scroll(function(){
//                              //a++;
//                             if(!loading.data("on")) return;
//                             // 计算所有瀑布流块中距离顶部最大，进而在滚动条滚动时，来进行ajax请求，方法很多这里只列举最简单一种，最易理解一种
//                             var itemNum=$('#waterfull').find('.item').length;
//                             var itemArr=[];
//                             itemArr[0]=$('#waterfull').find('.item').eq(itemNum-1).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
//                             itemArr[1]=$('#waterfull').find('.item').eq(itemNum-2).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
//                             itemArr[2]=$('#waterfull').find('.item').eq(itemNum-3).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
//                             var maxTop=Math.max.apply(null,itemArr);
//                             if(maxTop<$(window).height()+$(document).scrollTop()){
//                                 //加载更多数据
//                                 loading.data("on",false).fadeIn(800);
//                                 (function(sqlJson){
//                                     container.masonry();
//                                     /*这里会根据后台返回的数据来判断是否你进行分页或者数据加载完毕这里假设大于30就不在加载数据*/
//                                     if(itemNum>30){
//                                         loading.text('就有这么多了！');
//                                     }else{
//                                         var html="";
//                                         for(var i in sqlJson){
//                                             //alert(i);
//                                             html+="<li class='item'><a onclick='opena("+sqlJson[i].id+")'  class='a-img'><img src='/productImg/"+sqlJson[i].picture+"'></a>";
//                                             html+="<div class='choose'><div class='collect'><a onclick='setcollection("+sqlJson[i].id+","+sqlJson[i].name+")'><img src='/client/image/star.png''><p >"+sqlJson[i].num_c+"</p></a></div><div class='like'><a onclick='setlike("+sqlJson[i].id+")'><img src='/client/image/heart_b.png'><p class='num_love'>"+sqlJson[i].num_love+"</p></a></div></div>";
//                                             html+="<h2 class='li-title'>"+sqlJson[i].name+"</h2>";
//                                             html+="<p class='description'>"+sqlJson[i].brief+"</p><div class='qianm clearfloat'>";
//                                             html+="<div class='user-block'><div class='user' ><img style='border-radius:50%' src='/portraitImg/"+sqlJson[i].artist_portrait+"'></div></div><div class='user-introduction'>";
//                                             html+="<div class='user-name'>"+sqlJson[i].artist_name+"</div><div class='user-skill'>"+sqlJson[i].artist_content+"</div> </div></div></li>";
//                                         }
//                                         /*模拟ajax请求数据时延时800毫秒*/
//                                         var time=setTimeout(function(){
//                                             $(html).find('img').each(function(index){
//                                                 loadImage($(this).attr('src'));
//                                             });
//                                             var $newElems = $(html).css({ opacity: 0}).appendTo(container);
//                                             $newElems.imagesLoaded(function(){
//                                                 $newElems.animate({ opacity: 1},800);
//                                                 container.masonry( 'appended', $newElems,true);
//                                                 loading.data("on",true).fadeOut();
//                                                 clearTimeout(time);
//                                             });
//                                         },800)
//                                     }
//                                 })(sqlJson);
//                             }
//                         });
//                         //
//                         function loadImage(url) {
//                             var img = new Image();
//                             //创建一个Image对象，实现图片的预下载
//                             img.src = url;
//                             if (img.complete) {
//                                 return img.src;
//                             }
//                             img.onload = function () {
//                                 return img.src;
//                             };
//                         };
//                         loadImage('/images/one.jpeg');
//                         /*item hover效果*/
//                         var rbgB=['#eeeeee'];
//                         $('#waterfull').on('mouseover','.item',function(){
//                             var random=Math.floor(Math.random() *1);
//                             $(this).animate({'backgroundColor':rbgB[random]},0);
//                         });
//                         $('#waterfull').on('mouseout','.item',function(){
//                             $(this).animate({'backgroundColor':'#fff'},0);
//                         });
//                     }else{
//                         alert(obj.msg);
//                     }
//                 },
//                 error:function(e){
//                     alert("ERROR1!");
//                 }
//             });
//         }
    //接收热点查询
    function hotsearch(hot){
        e = 2;
        $('#waterfull ul').empty();
        $.ajax({
            url:'/client/get?page=1&e='+e,
            data:{search:hot},
            type:'GET',
            dateType:'json',
            success:function(res){
                //解析res
                var obj = eval("("+res+")");
                if(obj.error == 0){
                    console.log(obj);
                    //加载 成功函数
                    toSuccess(obj);
                }else{
                    layer.msg(obj.msg);
                }
            },
            error:function(){
                layer.msg('error');
            }
        });
    }
    //打开详情页
    function opena(_id){
        layer.open({
            type: 2,
            area: ['800px', '90%'],
            skin: 'layui-layer-rim',
            content: ['/client/productDetails/'+_id],
            cancel:function(){
                parent.location.reload();
            }
        });

    }
    //喜欢
    function setlike(_id,page,i){
        var url = '/client/like',
            data = {id:_id};
            $.ajax({
                url:url,
                data:data,
                type:'GET',
                dateType:'json',
                async:false,
                success:function(res){
                    var res = eval("("+res+")");
                    console.log(res);
                    if(res.error == 0){
                        $("#like"+page+i).text(res.num_love);
                    }else if(res.error == 1){
                        layer.open({title:'登录',type: 2,area: ['520px', '640px'],skin: 'layui-layer-rim',content: ['/client/toLogin', 'no']});
                    }
                    layer.msg(res.msg);
                },
                error:function(){
                    alert('ERROR!');
                }
            });
    }
    //收藏
    function setcollection(_id,page,i){
        var url = '/client/collection',
            data = {id:_id};
        $.ajax({
            url:url,
            data:data,
            type:'GET',
            dateType:'json',
            async:false,
            success:function(res){
                var res = eval("("+res+")");
                console.log(res);
                if(res.error == 0){
                    if(typeof(page) != "undefined"){
                        $("#collect"+page+i).text(res.num_c);
                    }else{
                        $('#num_c').text('收藏：'+res.num_c)
                    }

                }else if(res.error == 1){
                    layer.open({
                        title:'登录',
                        type: 2,
                        area: ['520px', '640px'],
                        skin: 'layui-layer-rim',
                        content: ['/client/toLogin', 'no']
                    });
                }
                layer.msg(res.msg);
            },
            error:function(){
                alert('ERROR!');
            }
        });
    }
    //下载
    function todownload(_id){
        $.ajax({
            url:'/client/download/'+_id,
            data:{},
            type:'GET',
            dateType:'json',
            async:false,
            success:function(res){
                var res = eval("("+res+")");
                console.log(res);
                if(res.error == 0){
                    window.location.reload = '/client/productDetails/';
                }else if(res.error == 1){
                    layer.open({title:'登录',type: 2,area: ['520px', '640px'],skin: 'layui-layer-rim',content: ['/client/toLogin', 'no']});
                }else{
                    layer.msg(res.msg);
                }
            },
            error:function(){
                layer.msg('error');
            }
        });
    }
